<template>
  <div class="collection-box">
    <content-header :title="routeItem.title"></content-header>
    <div class="search">
      <!-- <el-input
        placeholder="搜索"
        prefix-icon="el-icon-search"
        v-model="searchName"
        type="text"
        style="width:150px"
        @change="handleSearch"
      >
      </el-input> -->

      <input type="text" class="search-input" v-model="searchName" placeholder="请输入藏品名称" style="width:150px"
        @keyup.enter="handleSearch">

    </div>
    <div v-if="tabs.length > 1" class="xui-margin-top tab-box" style="margin-left:184px;">
      <tab-bar @tab-click="handleClick" :btns="tabs" :activeTabName="typeId"></tab-bar>
    </div>
    <ul class="list xui-margin-top-sm xui-fc">
      <li v-for="(item,index) in listData" :key="index">
        <router-link :to="{ name: 'Collection-overview-detail', params: { id: item.id }, query:{sid:item.sid}}">
          <img-box :width="300" :height="205" :imgSrc="item.picUrl">
          </img-box>
          <div class="list__text">
            <h4 class="xui-text-truncate xui-padding-horizontal-sm" v-if="isEnglish">{{item.nameEn}}</h4>
            <h4 class="xui-text-truncate xui-padding-horizontal-sm" v-else>{{item.name}}</h4>
          </div>
        </router-link>
        <div class="btn">
          <el-button v-if="!item.hasThumbsUp" size="mini" @click="thumbsUp(index)">
            <i class="iconfont icon-aixin"></i>
            点赞
          </el-button>
          <el-button v-else size="mini" style="cursor:default">
            <i class="iconfont icon-aixin-filling"></i>
            已点赞
          </el-button>
        </div>
      </li>
    </ul>
    <!-- 分页组件 -->
    <el-pagination background v-if="page.count" layout="prev, pager, next" :total="page.count" class="xui-margin-top xui-text-center"
      :current-page.sync="page.index" @current-change="getCollectionList" :page-size="12">
    </el-pagination>
    <p class="xui-margin-top-xxl xui-text-center xui-font-size-md" v-else>
      <span v-if="isEn">No content</span>
      <span v-else>暂无内容</span>
    </p>
  </div>
</template>

<script>
import ImgBox from "@/components/widge/img-box";
import { getNewsInfoList } from "@/api/news";
import ContentHeader from "../../../components/widge/content-header";
import { getCollectionList, getCollectionType } from "@/api/list";
import { hasThumbsUp, thumbsUp } from "@/api/interact";
import { getLang } from "@/utils/lang";
import TabBar from "../../../components/widge/tabs/tab-bar";

export default {
  components: {
    TabBar,
    ContentHeader,
    "img-box": ImgBox
  },
  props: {
    imgSrc: String
  },
  data() {
    return {
      listData: {},
      activeName: "",
      tabs: [],
      page: {
        index: Number(this.$route.query.page) || 1,
        count: null
      },
      isEnglish: false,
      searchName: ""
    };
  },
  computed: {
    isEn() {
      return getLang() == "en";
    },
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    },
    userId() {
      return this.$store.getters.userId;
    },
    typeId() {
      return this.$store.getters.collectionTypeId;
    }
  },
  methods: {
    getCollectionList() {
      let pageIndex = this.page.index;
      let name = this.searchName;
      this.$router.push({
        name: this.$route.name,
        query: {
          page: pageIndex
        }
      });
      getCollectionList(this.typeId, pageIndex, name).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
        if (this.userId) {
          this.listData.forEach(item => {
            hasThumbsUp(item.id).then(res => {
              this.$set(item, "hasThumbsUp", res.data);
            });
          });
        }
      });
    },
    thumbsUp(index) {
      if (!this.userId) {
        this.$store.dispatch("ToggleNeedLogin", true);
        return false;
      }
      thumbsUp(this.listData[index].id).then(res => {
        if (res.msg.indexOf("成功") > -1) {
          this.listData[index].hasThumbsUp = true;
        }
      });
    },
    handleClick(tabName) {
      this.page.index = 1;
      this.$store.dispatch("setTypeID", tabName);
      this.getCollectionList();
    },
    handleSearch() {
      this.page.index = 1;
      this.getCollectionList();
    }
  },
  mounted() {
    if (getLang() == "en") {
      this.isEnglish = true;
    }

    getCollectionType().then(res => {
      let items = res.data.recordsList;
      let result = [
        {
          name: "",
          text: "全部"
        }
      ];
      items.forEach((tab, index) => {
        let item = new Object();
        item.name = tab.id + "";
        item.text = tab.dictName;
        result.push(item);
      });
      this.tabs = result;
    });
    this.getCollectionList();
  },
  watch: {
    userId() {
      this.getCollectionList();
    }
  }
};
</script>

<style>
.collection-box {
  position: relative;
}

.collection-box .search {
  position: absolute;
  top: 62px;
  left: 0;
}

.collection-box .tab-box {
  width: 730px;
  margin: 20px auto;
}

.collection-box .el-input {
  width: 78px;
}

.collection-box .el-input .el-input__inner {
  border-radius: 20px !important;
  height: 36px;
  line-height: 36px;
}

.el-input__icon {
  line-height: 36px;
}

.collection-box .list li {
  width: 300px;
  cursor: pointer;
  float: left;
  margin: 20px 10px 0 0;
  position: relative;
}

.collection-box .list li:hover .list__text {
  background-color: #dda631;
  border: 1px solid #dda631;
}

.collection-box .list li:hover .btn {
  display: block;
}

.collection-box .list li:hover .list__text h4 {
  color: #fff;
}

.collection-box .list .list__text {
  height: 58px;
  width: 300px;
  border: 1px solid #e7e6dd;
  transition: background 0.2s;
}

.collection-box .list .list__text h4 {
  font-size: 16px;
  font-weight: normal;
  color: #000;
  line-height: 58px;
  text-align: center;
  transition: color 0.2s;
}

.collection-box .num {
  float: right;
}

.collection-box .btn {
  position: absolute;
  right: 10px;
  bottom: 26%;
  display: none;
  z-index: 99;
}

.collection-box .btn i {
  color: #b59551;
  font-size: 12px;
}

.collection-box .btn span {
  color: #876b31;
}

.collection-box .el-button {
  color: #876b31;
  font-family: 宋体;
}

.search-input {
  border: 1px solid #dcdfe6;
  padding: 8px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
}

.search-input:hover {
  border-color: #ccc;
}

.search-input:focus {
  border-color: #bf9c51;
}
</style>
